<template>
	 
	<view class="grid">
		<view class="item" @click="go(item)"
		v-for="(item,i) in list" :key="i" :style="{'width':w}">
		  <image :src="item[imgName]" mode="widthFix" :style="{'width':imgPercentage+'%'}"></image>
		  <view>{{item[titleName]}}</view>
		  <view class="message-badge" v-if="item.point">{{ item.point }}</view>
		</view>
	</view>
 
</template>

<script>
	export default {
		name:"woods-grid",
		props: {
			gourl:{
				default:true,
				type:Boolean
			},
			list:{
				default:[],
				type:Array
			},
			column: { // 列的数量
				type: [String, Number],
				default: 5
			},
			imgPercentage:{
				type:[String, Number],
				default:42
			},
			imgName:{
				type:String,
				default:"img"
			},
			titleName:{//key name
				type:String,
				default:"name"
			}, 
		},
		computed:{
			w() {
				const column_rate = 100 / this.column ;
				return column_rate +"%";
			},
			
		},
		watch:{
			list(){
				this.$emit("change",this.list)
			}
		},
		data() {
			return {
				 
			};
		},
		methods:{
			go(item){
				if (!this.gourl) {
					return
				}
				this.tourl(item.url)
			}
		}
	}
</script>

<style scoped lang="scss">
 
.grid {
    display: flex;
    width: 100%;
	flex-wrap: wrap;
    
    .item {
      margin-top: 20rpx;
	  position: relative;
	  // background-color: aqua;
      // width: 100%;
      text-align: center;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      image {
         
		 height: auto;
      }
      view {
        
        font-size: 24rpx;
        font-weight: 400;
        text-align: center;
        color: #333333;
        line-height: 40rpx;
      }
	  .message-badge{
		  position: absolute;
		  top: -10rpx;
		  right: 30rpx;
		  background-color: red;
		  color: white;
		  border-radius: 50%;
		  min-width: 30rpx;
		  height: 30rpx; 
		  font-size: 14rpx;
		  line-height: 30rpx;
		  text-align: center;
	  }
    }
}

</style>